<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- 双向绑定 -->
        <input type="text" v-model="myText"> {{ myText }}

        <!-- 和上面的input和myText都绑定了 -->
        <textarea name="" id="" cols="30" rows="10" v-model="myText"></textarea>

        <h2>多选-checkbox</h2>
        <input type="checkbox" v-model="checkGroup" value="vue"> vue
        <input type="checkbox" v-mdoel="checkGroup" value="js"> js
        <input type="checkbox" v-model="checkGroup" value="java"> java
        <button @click="handleSubmit()">提交</button>

        <h2>checkBox-记住用户名</h2>
        <input type="checkbox" v-model="isRem" value="false">记住用户名
        <button @click="handleLogin()">登录</button>

        <h2>单选</h2>
        <input type="radio" v-model="favorLang" value="vue" name="favor"> vue
        <input type="radio" v-model="favorLang" value="js" name="favor"> js
        <input type="radio" v-model="favorLang" value="java" name="favor"> java
        <button @click="handleSelect()">提交</button>

    </div>

    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                myText: "",
                checkGroup: [],
                isRem: false,
                favorLang: ""
            },
            methods: {
                handleSubmit() {
                    console.log(this.checkGroup)
                },
                handleLogin() {
                    console.log(this.isRem)
                },
                handleSelect() {
                    console.log(this.favorLang)
                }
            }
        })
    </script>
</body>
</html>